<template>
    <div class="common_page">
        <!-- 搜索 -->
        <div class="common_page_inBox">
            <h3 class="com_h3_title"><i class="el-icon-search"></i> 检索</h3>
            <div class="search_form">
                <el-form :ref="searchForm" :model="searchForm" :inline="true" label-width="">
                    <el-form-item label="文本框">
                        <el-input v-model="searchForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="下拉框">
                        <el-select v-model="searchForm.region" placeholder="请选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="时间选择">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1" style="text-align: center;">~</el-col>
                        <el-col :span="11">
                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="searchForm.date2" style="width: 100%;"></el-time-picker>
                        </el-col>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit('searchForm')" class="search_btn subBtn">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 表格 -->
        <div class="common_page_inBox clearfix">
            <h3 class="com_h3_title bordernone clearfix">
                <i class="el-icon-date"></i> 数据展示
                <el-button type="button" class="fr h3_right_btn" @click="handleAddRow()">新增</el-button>
                <el-button type="button" class="fr h3_right_btn" @click="handleDeleteAll()">批量删除</el-button>
            </h3>
            <div class="table_box">
                <div class="table" v-loading="loading">
                    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" stripe
                        border>
                        <el-table-column type="selection" width="40">
                        </el-table-column>
                        <el-table-column prop="id" sortable fixed label="id">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名">
                        </el-table-column>
                        <el-table-column prop="email" label="email">
                        </el-table-column>
                        <el-table-column prop="phone" label="电话">
                        </el-table-column>
                        <el-table-column prop="province" label="省份">
                        </el-table-column>
                        <el-table-column prop="city" label="市区">
                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button @click="handleView(scope.$index, scope.row)" size="mini">查看</el-button>
                                <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" size="mini">编辑</el-button>
                                <el-button type="danger" @click.native.prevent="handleDelete(scope.$index)" size="mini">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination_container clearfix">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total" background>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="rowInfo" :model="rowInfo" label-width="50px">
                <el-form-item label="姓名">
                    <el-input v-model="rowInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="email">
                    <el-input v-model="rowInfo.email"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="rowInfo.phone"></el-input>
                </el-form-item>
                <el-form-item label="省份">
                    <el-input v-model="rowInfo.province"></el-input>
                </el-form-item>
                <el-form-item label="市区">
                    <el-input v-model="rowInfo.city"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="rowInfo.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增弹出框 -->
        <el-dialog title="新增" :visible.sync="addVisible" width="30%">
            <el-form ref="rowInfo" :model="rowInfo" label-width="50px">
                <el-form-item label="姓名">
                    <el-input v-model="rowInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="email">
                    <el-input v-model="rowInfo.email"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="rowInfo.phone"></el-input>
                </el-form-item>
                <el-form-item label="省份">
                    <el-input v-model="rowInfo.province"></el-input>
                </el-form-item>
                <el-form-item label="市区">
                    <el-input v-model="rowInfo.city"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="rowInfo.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'commonPage',
        data() {
            return {
                searchForm: { // 查询字段
                    name: '',
                    region: '',
                    date1: '',
                    date2: ''
                },
                loading: true, // 加载层
                currentPage: 1, // 当前页码
                total: 0, // 数据总条数
                pageSize: 10, // 每页显示条数
                tableData: [], // 表格数据容器
                rowInfo: { // 编辑字段
                    name: '',
                    email: '',
                    phone: '',
                    province: '',
                    city: '',
                    address: ''
                },
                id: -1, // 当前编辑条目id
                editVisible: false, // 编辑层显示控制
                addVisible: false, // 新增层显示控制
                multipleSelection: [] // 多选 -- 批量删除
            }
        },
        created() {
            // 请求表格数据
            let _this = this
            this.$axios.get('http://localhost:8080/static/json/common_table_data.json').
            then((res) => {
                _this.tableData = res.data.result
                _this.total = res.data.total
            }).
            catch((error) => {
                _this.$message.error(error)
            })
        },
        methods: {
            getTableData(pages) { // 数据获取的方法
                let _this = this,
                    url = ''
                _this.loading = true
                pages == undefined || pages < 0 ? pages = 1 : pages = _this.currentPage
                
                console.log('获取数据')
                _this.loading = false
                // this.$axios.post(url, {
                //     name: _this.searchForm.name,
                //     region: _this.searchForm.region,
                //     date1: _this.searchForm.date1,
                //     date2: _this.searchForm.date2,
                //     pageSize: _this.pageSize,
                //     currentPage: pages
                // }).
                // then((res) => {
                //     _this.tableData = []
                //     _this.loading = false
                // }).
                // catch((error) => {
                //     _this.$message.error(error)
                //     _this.loading = false
                // })
            },
            deleteItem(index) { // 删除方法
              let _this = this,
                  url   = ''

              // this.$axios.post(url, {
              //     id: str
              // }).
              // then((res) => {
              //   _this.$message.success('删除成功')
              //   // 重新获取数据
              //   _this.getTableData()
              // }).
              // catch((error) => {
              //     _this.$message.error(error)
              // })
            },
            searchSubmit(form) { // 搜索提交
                this.getTableData()
            },
            handleAddRow() { // 新增表格项
                this.addVisible = true
            },
            saveAdd() { // 提交新增
                this.$message.success('新增成功')
                this.addVisible = false
            },
            handleDeleteAll() { // 批量删除
              let selectedItems = this.multipleSelection,
                  str = ''

              if (selectedItems.length < 1) {
                this.$message.info('请选中条目')
              }else{
                for (let i = 0; i < selectedItems.length; i++) {
                    str += selectedItems[i].id + ','
                }
                
                this.$confirm('确定删除信息？', '提示', { type: 'warning' }).then(() => {
                  this.deleteItem(str)
                })
              }
            },
            handleDelete(index) { // 删除
                this.$confirm('确定删除此条信息？', '提示', { type: 'warning' }).then(() => {
                  let str = index.toString()
                  this.deleteItem(str)
                })
            },
            handleEdit(index, row) { // 编辑
                this.id = index
                let item = this.tableData[index]
                this.rowInfo = {
                    name: item.name,
                    email: item.email,
                    phone: item.phone,
                    province: item.province,
                    city: item.city,
                    address: item.address
                }
                this.editVisible = true
            },
            saveEdit() { // 保存编辑
                this.$set(this.tableData, this.id, this.rowInfo)
                this.editVisible = false
                this.$message.success('编辑成功')
            },
            handleView(index, row) { // 查看

            },
            handleSizeChange(val) { // 每页显示的数量
                this.pageSize = val
                this.getTableData()
            },
            handleCurrentChange(val) { // 点击页码
                this.currentPage = val
                this.getTableData(val)
            },
            handleSelectionChange(val) { // 单个条目选中状态改变
                this.multipleSelection = val
            }
        },
        mounted() {
            this.loading = false
        }
    }

</script>
<style lang="stylus">

</style>
